<template>
  <div ref="refChart" :style="{ height: kHOne + 'px'}"></div>
</template>

<script>
import theme from '../assets/theme/theme'
import {getComplexJson} from '../api'

export default {
  name: 'ChartSix',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartSix;
    }
  },
  data() {
    return {
      chartInstance: null,
      // 浏览器高度
      kHOne: null,
      // 浏览器宽度
      kWOne: null,
      // 浏览器字体大小
      kFOne: null,
      // 自适应浏览器获取宽高大小定时器
      screenTime: null,
      // 数据刷新定时器
      dataTimer: null,
      // 内部定时器
      innerTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHOne = Math.round(this.screenHeight * 0.45)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
    // Tootip刷新定时器
    this.getInnerTimer();
  },
  beforeDestroy() {
    // 清除tootip刷新定时器
    clearInterval(this.innerTimer);
    this.innerTimer = null;
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTime);
    this.screenTime = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTime = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.kHOne = Math.round(this.screenHeight * 0.45);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      // 浏览器字体计算
      this.kFOne = Math.round(this.screenWidth / 100);
      // 浏览器宽度宽度
      this.kWOne = this.screenWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme);
      const initOption = {
        title: {
          text: "存款利率与消费活跃度变化",
          left: 'left'
        },
        legend: {
          left: 'right',
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        color: ['#019688', '#119AC2'],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '存款利率',
            // 字体大小
            // nameTextStyle: {
            //    fontSize: 32
            // },
            // 轴刻度线
            axisTick: {
              show: false,
            },
            // 刻度文字颜色
            axisLabel: {color: '#808080'},
            // y轴刻度设置
            axisLine: {
              lineStyle: {
                width: 2,
                color: '#019688',
              }
            },
            // y轴分隔线设置
            splitLine: {
              lineStyle: {
                color: 'rgba(226,226,226,0.5)',
              }
            }
          },
          {
            type: 'value',
            name: '消费活跃度',
            interval: 2,
            // 轴刻度线
            axisTick: {
              show: false,
            },
            axisLabel: {color: '#808080'},
            axisLine: {
              lineStyle: {
                width: 2,
                color: '#019688',
              }
            },
            // y轴分隔线设置
            splitLine: {
              lineStyle: {
                color: 'rgba(226,226,226,0.5)',
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.3)', 'rgba(226,226,226,0.3)'],
              }
            }
          },
        ],
        series: [
          {
            name: '存款利率',
            type: 'line',
            smooth: true,
            symbolSize: 6,
            areaStyle: {},
            itemStyle: {
              borderWidth: 2,
            }
          },
          {
            name: '消费活跃度',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbolSize: 6,
            areaStyle: {},
            itemStyle: {
              borderWidth: 2,
            }
          }
        ]
      };
      // 图表初始化配置
      this.chartInstance.setOption(initOption);
      // 鼠标移入停止定时器
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.dataTimer);
      });

      // 鼠标移入启动定时器
      this.chartInstance.on("mouseout", () => {
        this.getDataTimer();
      });
      // 鼠标移入停止定时器
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.innerTimer);
      });

      // 鼠标移入启动定时器
      this.chartInstance.on("mouseout", () => {
        this.getInnerTimer();
      });
    },
    getData() {
      getComplexJson().then(res => {
        let num1 = res.chartSix.num1
        let num2 = res.chartSix.num2
        let num3 = res.chartSix.num3
        let num4 = res.chartSix.num4
        let num5 = res.chartSix.num5
        let num6 = res.chartSix.num6
        let num7 = res.chartSix.num7
        let num8 = res.chartSix.num8
        let num9 = res.chartSix.num9
        let num10 = res.chartSix.num10
        let num11 = res.chartSix.num11
        let num12 = res.chartSix.num12

        let n1 = res.chartSix.num13
        let n2 = res.chartSix.num14
        let n3 = res.chartSix.num15
        let n4 = res.chartSix.num16
        let n5 = res.chartSix.num17
        let n6 = res.chartSix.num18
        let n7 = res.chartSix.num19
        let n8 = res.chartSix.num20
        let n9 = res.chartSix.num21
        let n10 = res.chartSix.num22
        let n11 = res.chartSix.num23
        let n12 = res.chartSix.num24
        // 处理图表需要的数据
        const dataOption = {
          xAxis: [
            {
              data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
            }
          ],
          series: [
            {
              data: [num1, num2, num3, num4, num5, num6, num7, num8, num9, num10, num11, num12]
            },
            {
              data: [n1, n2, n3, n4, n5, n6, n7, n8, n9, n10, n11, n12]
            }
          ]
        };
        // 图表数据变化配置
        this.chartInstance.setOption(dataOption);
      })
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 35);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize,
          }
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: this.titleFontSize,
          }
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.8),
            }
          }
        },
        yAxis: [
          {
            // 字体大小
            nameTextStyle: {
              fontSize: this.titleFontSize
            },
            //  改变y轴字体颜色和大小
            axisLabel: {
              textStyle: {
                fontSize: Math.round(this.titleFontSize * 0.8),
              }
            }
          },
          {
            // 字体大小
            nameTextStyle: {
              fontSize: this.titleFontSize
            },
            //  改变y轴字体颜色和大小
            axisLabel: {
              textStyle: {
                fontSize: Math.round(this.titleFontSize * 0.8),
              }
            }
          }
        ]
      };
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        this.getData();
      }, 3000)
    },
    // 定时器
    getInnerTimer() {
      let index = 0; // 播放所在下标
      this.innerTimer = setInterval(() => {
        // echarts实现定时播放tooltip
        this.chartInstance.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        });
        index++;
        if (index > 12) {
          index = 0;
        }
      }, 2000)
    }
  }
}
</script>
